<template>
    <div v-loading="load" class="paymentbox">
        <micro-app
            style="transform: translate(0,0);height:100%;"
            :url="url"
            :data="data"
            :baseroute="baseRoute"
            name="we7Plugin"
            @error="microError"
            @datachange='handleDataChange'
        ></micro-app>
        <div v-if="error">{{error}}</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            load: true,
            url: "",
            baseRoute: "",
            error: "",
            data: {ticket: ''},
        }
    },
    created(){
        this.data.ticket = this.$route.query.ticket;
        this.baseRoute = window.location.pathname;
    },
    mounted(){
        setTimeout(()=>{ this.load = false; },3000);
    },
    methods:{
        handleDataChange(e) {
            let data = JSON.parse(JSON.stringify(e.detail.data || {}))
            if(data.confirm) {
                this.$message.success("支付成功");
            } else if(data.cancel) {
                this.$message.warning("取消支付");
            } else if(data.load) {
                this.load = false;
            }
        },
        microError(e) {this.error = e?.detail?.error?.message},
    },
}
</script>

<style scoped>
.paymentbox{height:calc(100vh - 50px);}
</style>